<template>
	<view class="oneBtnLogin">
		<view class="upper-container">
			<view class="welcome-login">
				<view class="welcome-text">欢迎登录</view>
				<view class="welcome-img-container">
					<image src="/static/logo_s.png"></image>
				</view>
			</view>
			<view class="slogan">用了帮把关，烦事变简单!</view>
		</view>

		<view class="u-p-30" style="margin-top: 140rpx;">
			<u-field v-model="mobile" label="手机号" :icon-style="{color:'#59C137'}" placeholder="请填写手机号" :clearable="false">
			</u-field>
			<u-field v-model="code" label="验证码" :icon-style="{color:'#59C137'}" placeholder="请填写验证码" :clearable="false">
				<button slot="right" @click="getCode" class="u-reset-button"><text
						class="u-type-primary">{{codeText}}</text></button>
			</u-field>
			<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
			<view class="consent-agreement">
				<checkbox-group @change="handleCheckboxChange">
					<label>
						<checkbox value="cb" style="transform:scale(0.55)" />
					</label>
					<view>
						阅读并同意
						<text @click="gotoPrivacy('privacy')">《用户隐私协议》</text>
						和
						<text @click="gotoPrivacy('user')">《用户服务协议》</text>
					</view>
				</checkbox-group>
			</view>
			<view class="u-m-t-30">
				<u-button type="primary" hover-class="none" shape="circle" @click="submit">登录</u-button>
				<!-- #ifdef APP-PLUS -->
				<view class="u-m-t-30">
					<u-button type="primary" plain hover-class="none" shape="circle"
						:customStyle="{backgroundColor:'#ffffff !important'}" @click="back">返回</u-button>
				</view>
				<!-- #endif -->
			</view>
		</view>


		<view class="login-message-wrapper">
			<view class="login-message-text">未注册的手机号首次登录将自动注册</view>

			<!-- #ifdef APP-PLUS -->
			<view class="goto-code-text" @click="gotoPage()">其他方式登录</view>
			<!-- #endif -->
		</view>
		<view class="u-flex-1 h-0 u-flex u-row-center">
		</view>

	</view>
</template>

<script>
	import common from "@/utils/wxApplet/common.js"
	import config from '@/config.js'
	export default {
		data() {
			return {
				isPass: false,
				mobile: '',
				code: '',
				codeText: '',
				params: {},
				push_clientid: ''
			}
		},
		onLoad(e) {
			this.params = e;
			// #ifdef APP-PLUS
			this.getappCLientId()
			// #endif

		},
		methods: {
			getappCLientId() {
				uni.getPushClientId({
					success: (res) => {
						console.log('客户端推送标识:', res.cid)
						this.push_clientid = res.cid
					}
				})
			},
			codeChange(text) {
				this.codeText = text;
			},
			getCode() {
				if (!this.mobile) {
					this.$u.toast('请输入手机号');
					return;
				}
				if (!this.$u.test.mobile(this.mobile)) {
					this.$u.toast('请输入正确的手机号');
					return;
				}
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					this.$u.api.getVerifyCode({
						phone: this.mobile
					}).then(res => {
						uni.hideLoading();
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
						this.$u.toast('已发送');
					}).catch(err => {
						console.log(err);
					})
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			submit() {
				if (!this.isPass) {
					this.$u.toast('请阅读并同意协议后再进行登录');
					return;
				}
				if (!this.mobile) {
					this.$u.toast('请输入手机号');
					return;
				}
				if (!this.$u.test.mobile(this.mobile)) {
					this.$u.toast('请输入正确的手机号');
					return;
				}
				if (!this.code) {
					this.$u.toast('请输入验证码');
					return;
				}
				if (this.code.length < 6) {
					this.$u.toast('验证码至少为6位数');
					return;
				}
				if (this.params.openId) {
					this.$u.api.bindPhone(this.params.type, {
						phone: this.mobile,
						captcha: this.code,
						openId: this.params.openId,
						cid: this.push_clientid
					}).then(res => {
						this.$u.toast("登录成功")
						this.$u.vuex('vuex_token', 'Bearer ' + res.token);
						common.getUserInfo().then(res => {
							uni.navigateBack()
						})
					})
				} else {
					this.$u.api.mobleLogin({
						phone: this.mobile,
						captcha: this.code,
						spread_spid: this.$store.state.vuex_SPID,
					}).then(res => {
						this.$u.toast("登录成功")
						this.$u.vuex('vuex_token', 'Bearer ' + res.token);
						// #ifdef H5
						uni.redirectTo({
							url: "/pages/subpage/about/entry"
						})
						// #endif
						// #ifndef H5
						common.getUserInfo().then(res => {
							uni.navigateBack()
						})
						// #endif
					})
				}
			},
			gotoPage() {
				uni.redirectTo({
					url: "/pages/subpage/login/oneBtnLogin"
				})
			},


			handleCheckboxChange(e) {
				let val = e.detail.value;
				this.isPass = val.length > 0;
			},
			gotoPrivacy(type) {
				this.$u.route("/pages/subpage/webview/webview", {
					url: `${config.HTTP_HOST}/yinsi/${type}.html`
				})
			},
			back() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}

	.oneBtnLogin {
		width: 100%;
		min-height: 100%;
		padding-top: 160rpx;
		padding-bottom: 60rpx;
		// display: flow-root;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-image: url('https://bangbaguan.oss-cn-shanghai.aliyuncs.com/APP/login-bg.png');
		display: flex;
		flex-direction: column;

		.upper-container {
			margin-left: 61rpx;

			display: flex;
			flex-direction: column;

			.welcome-login {
				display: flex;
				align-items: center;
				position: relative;

				.welcome-text {
					font-size: 48rpx;
					font-weight: bold;
					color: #000000;
					flex-shrink: 0;
				}

				.welcome-img-container {
					width: 148rpx;
					height: 47rpx;
					margin-left: 25rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				&::after {
					content: '';
					position: absolute;
					bottom: -25rpx;
					width: 72rpx;
					height: 5rpx;
					background: $u-type-primary;
					opacity: 0.5;
					border-radius: 3rpx;
				}
			}

			.slogan {
				margin-top: 46rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #939393;
			}
		}

		.input-wrapper {
			margin-left: 63rpx;
			margin-top: 100rpx;

			.phone-number-wrapper {
				position: relative;
				display: flex;
				align-items: center;
				margin-bottom: 100rpx;

				.icon-container {
					width: 25rpx;
					height: 36rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				input {
					margin-left: 26rpx;
					font-size: 30rpx;
					font-weight: 400;
				}

				&::after {
					content: '';
					position: absolute;
					bottom: -32rpx;
					width: 640rpx;
					height: 1rpx;
					background: #d0d0d0;
				}
			}

			.verification-code-wrapper {
				width: 638rpx;
				position: relative;
				display: flex;
				algin-items: center;
				justify-content: space-between;

				.icon-input-wrapper {
					display: flex;
					algin-item: center;

					.icon-container {
						width: 30rpx;
						height: 36rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					input {
						margin-left: 22rpx;
						font-size: 30rpx;
						font-weight: 400;
					}
				}

				&::after {
					content: '';
					position: absolute;
					bottom: -32rpx;
					width: 640rpx;
					height: 1rpx;
					background: #d0d0d0;
				}
			}
		}

		.goto-code-text {
			color: $u-type-primary;
			text-align: right;
		}

		.login-message-wrapper {
			margin-left: 32rpx;
			margin-right: 32rpx;
			margin-top: 68rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.login-message-text {
			font-size: 26rpx;
			font-weight: 400;
			color: #c6c6c9;
		}

		.login-type-btn {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			overflow: hidden;
			margin: 0 100rpx;
		}

		.consent-agreement {
			margin-left: 30rpx;
			margin-top: 30rpx;

			checkbox-group {
				display: flex;
				align-items: center;

				view {
					font-size: 26rpx;
					font-weight: 400;
					color: #c6c6c9;

					text {
						color: $u-type-primary;
					}
				}
			}
		}

		.quick-login-wrapper {
			margin-top: 75rpx;
			width: 85.5%;
			margin-left: auto;
			margin-right: auto;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.quick-login-text {
				font-size: 26rpx;
				font-weight: 400;
				color: #c6c6c9;
			}

			.left-line,
			.right-line {
				width: 200rpx;
				height: 1rpx;
				background: #d0d0d0;
			}
		}

		.quick-login-btn-wrapper {
			margin-top: 49rpx;
			width: 50%;
			margin-left: auto;
			margin-right: auto;
			display: flex;
			justify-content: center;

			.wechat-wrapper {
				display: flex;
				flex-direction: column;
				align-items: center;

				.img-container {
					width: 60rpx;
					height: 60rpx;

					image {
						height: 100%;
						width: 100%;
					}
				}
			}

			.msg {
				margin-top: 21rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #c6c6c9;
			}
		}
	}
</style>